<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="600">
      <Form
        ref="personnelModal"
        :model="row"
        :rules="ruleInline"
        inline
        style="width: 100%"
        :label-width="85">
        <!-- <FormItem prop="muid" v-show="!row.id" label="面试官id" style="width: 250px">
          <Input type="text" v-model="row.muid" placeholder="请输入面试官id" />
        </FormItem> -->
        <FormItem prop="name" label="应聘者" style="width: 250px">
          <Input type="text" v-model="row.name" placeholder="请输入应聘者姓名" />
        </FormItem>
        <FormItem prop="tel" label="联系方式" style="width: 250px">
          <Input type="text" v-model="row.tel" placeholder="请输入联系方式" />
        </FormItem>
        <FormItem prop="job" label="应聘岗位" style="width: 250px">
          <Input type="text" v-model="row.job" placeholder="请输入应聘岗位" />
        </FormItem>
        <FormItem prop="viewtime" label="初试时间" style="width: 250px">
          <DatePicker v-model="row.viewtime" type="date" placeholder="请输入初试时间"></DatePicker>
        </FormItem>
        <FormItem prop="viewhour" label="初试时长" style="width: 250px">
          <Input type="text" v-model="row.viewhour" placeholder="请输入初试时长" />
        </FormItem>
        <FormItem prop="viewresult" label="初试结果" style="width: 250px">
          <Select v-model="row.viewresult" clearable placeholder="请选择初试结果">
            <Option value="A">
              A
            </Option>
            <Option value="B">
              B
            </Option>
            <Option value="C">
              C
            </Option>
            <Option value="D">
              D
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="isreview" label="是否复试" style="width: 250px">
          <Select v-model="row.isreview" clearable placeholder="请选择是否复试">
            <Option value="1">
              是
            </Option>
            <Option value="0">
              否
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="reviewtime" label="复试时间" style="width: 250px">
          <DatePicker type="date" v-model="row.reviewtime" placeholder="请输入复试时间"></DatePicker>
        </FormItem>
        <FormItem prop="reviewresult" label="复试结果" style="width: 250px">
          <Select v-model="row.reviewresult" clearable placeholder="请选择复试结果">
            <Option value="A">
              A
            </Option>
            <Option value="B">
              B
            </Option>
            <Option value="C">
              C
            </Option>
            <Option value="D">
              D
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="entrytime" label="入职时间" style="width: 250px">
          <DatePicker type="date" v-model="row.entrytime" placeholder="请输入入职时间"></DatePicker>
        </FormItem>
        <FormItem prop="entrydepart" label="入职部门" style="width: 250px">
          <Input type="text" v-model="row.entrydepart" placeholder="请输入入职部门" />
        </FormItem>
        <FormItem prop="entryaddress" label="入职地点" style="width: 250px">
          <Input type="text" v-model="row.entryaddress" placeholder="请输入入职地点" />
        </FormItem>
        <FormItem v-show="!row.id" prop="pcode" label="渠道来源" style="width: 250px">
          <Input type="text" v-model="row.pcode" placeholder="请输入渠道来源" />
        </FormItem>
        <FormItem prop="state" label="面试状态" style="width: 250px">
          <Select v-model="row.state" clearable placeholder="请选择面试状态">
            <Option value="-1">
              预约未到
            </Option>
            <Option value="0">
              面试中
            </Option>
            <Option value="1">
              面试录用
            </Option>
            <Option value="2">
              面试不录用
            </Option>
          </Select>
        </FormItem>
        <!-- <FormItem prop="uptime" label="最近修改时间" style="width: 250px">
          <DatePicker type="date" v-model="row.uptime" placeholder="请输入最近修改时间"></DatePicker>
        </FormItem>
        <FormItem prop="ctime" label="创建时间" style="width: 250px">
          <DatePicker type="date" v-model="row.ctime" placeholder="请输入创建时间"></DatePicker>
        </FormItem> -->
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'PersonnelModal',
  data () {
    return {
      title: '',
      loading: true,
      form: {
        name: '',
        job: '',
        viewtime: '',
        viewhour: '',
        viewresult: '',
        isreview: '',
        reviewtime: '',
        reviewresult: '',
        entrytime: '',
        entrydepart: '',
        entryaddress: '',
        pcode: '',
        state: '',
        uptime: '',
        ctime: ''
      },
      ruleInline: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '联系方式不能为空', trigger: 'blur' }
        ],
        muid: [
          { required: true, message: '面试官id不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  updated () {
    if (this.row.id && this.row.id !== '') {
      this.title = '修改面试信息'
    } else {
      this.title = '添加面试记录'
    }
  },
  computed: {
    ...mapState({
      row: state => state.personnel.row,
      modalState: state => state.modal.modalState
    })
  },
  methods: {
    ...mapActions(['updateModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.personnelModal.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('personnel-valid', {
          id: this.row.id,
          muid: this.row.muid ? parseInt(this.row.muid) : '',
          name: this.row.name,
          tel: this.row.tel ? parseInt(this.row.tel) : '',
          job: this.row.job,
          viewtime: this.row.viewtime ? this.$moment(this.row.viewtime).format('YYYY-MM-DD') : '',
          viewhour: this.row.viewhour ? parseInt(this.row.viewhour) : '',
          viewresult: this.row.viewresult,
          isreview: this.row.isreview ? parseInt(this.row.isreview) : '',
          reviewtime: this.row.reviewtime ? this.$moment(this.row.reviewtime).format('YYYY-MM-DD') : '',
          reviewresult: this.row.reviewresult ? this.row.reviewresult : '',
          entrytime: this.row.entrytime ? this.$moment(this.row.entrytime).format('YYYY-MM-DD') : '',
          entrydepart: this.row.entrydepart,
          entryaddress: this.row.entryaddress,
          pcode: this.row.pcode,
          state: this.row.state ? parseInt(this.row.state) : ''
          // uptime: this.row.uptime ? this.$moment(this.row.uptime).format('YYYY-MM-DD HH:mm:ss') : '',
          // ctime: this.row.ctime ? this.$moment(this.row.ctime).format('YYYY-MM-DD HH:mm:ss') : ''
        })
        this.$refs['personnelModal'].resetFields()
      })
    },
    cancel () {
      this.updateModalState(false)
      this.$refs['personnelModal'].resetFields()
    }
  }
}
</script>
